<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>云收藏</title>
	<base target="_blank">
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
	<el-container>
		<el-header class="title">
			<div class="c900 flex">
				<el-link :underline="false" href="index.html">
					<h1>云收藏</h1>
				</el-link>
				<el-input style="width: auto" placeholder="请输入搜索关键字">
					<el-button slot="append" icon="el-icon-search"></el-button>
				</el-input>
				<div class="flex">
					<el-avatar v-if="myinfo" :src="myinfo.head"></el-avatar>
					<el-link v-if="myinfo" @click="logout">退出</el-link>
					<el-link v-if="!myinfo">注册</el-link>
					<el-link v-if="!myinfo" @click="loginForm={};showLogin = true">登录</el-link>
				</div>
			</div>
		</el-header>
		<el-main>
			<div class="c900 h100">
				<el-container class="h100">
					<el-aside class="h100">
						<el-menu @select="selectMenu" class="h100" default-active="2" style="overflow: auto">
							<el-menu-item index="1">
								<el-button type="primary" @click="showEdit=true">新增</el-button>
							</el-menu-item>
							<el-menu-item index="2">
								<span>全部 ({{favs.length}})</span>
							</el-menu-item>
							<el-menu-item index="22">
								<span>未分类 (3)</span>
							</el-menu-item>
							<el-menu-item v-for="t in tags" :key="t.id" :index="'tag_' + t.id">
								<div class="flex">
									<span>{{t.name}} (未统计)</span>
									<el-button type="text">合并至</el-button>
								</div>
							</el-menu-item>
							<el-menu-item index="4">
								<span>云图</span>
							</el-menu-item>
						</el-menu>
					</el-aside>
					<el-main>
						<el-card v-for="f in favs">
							<div slot="header" class="flex">
								<div class="flex">
									<el-link :href="f.addr" target="_blank" :underline="false">
										<div class="flex">
											<img :src="f.image||''">
											<h3>{{f.name}}</h3>
											{{f.addr}}
										</div>
									</el-link>
									<small>访问量:{{f.opens}}</small>
								</div>
								<div>
									<el-button type="text">置顶</el-button>
									<el-button type="text">修改</el-button>
									<el-button type="text">删除</el-button>
								</div>
							</div>
							<div style="display: flex;gap: 5px">
								<el-tag v-for="t in f.tags.split(/[;,；，]+/)" size='mini'>{{t}}</el-tag>
							</div>
							<p>{{f.intro}}</p>
						</el-card>
					</el-main>
				</el-container>
			</div>
		</el-main>
		<el-footer class="flex title" style="justify-content: center;height: 30px">
			<a href="http://www.hyycinfo.com" target="_blank">源辰信息科技</a>
		</el-footer>
	</el-container>
	<el-dialog title="添加网址" :visible.sync="showEdit">
		<el-form>
			<el-form-item label="名称:" label-width="50px">
				<el-input autocomplete="off" placeholder="网站名称"></el-input>
			</el-form-item>
			<el-form-item label="地址:" label-width="50px">
				<el-input autocomplete="off" placeholder="输入http开头的网页地址"></el-input>
			</el-form-item>
			<el-form-item label="分类:" label-width="50px">
				<el-input autocomplete="off" placeholder="每个分类用 ; 号隔开, 例如: 游戏;新闻"></el-input>
			</el-form-item>
			<el-form-item label="图片:" label-width="50px">
				<el-input autocomplete="off" placeholder="输入http开头的网图片地址">
					<el-upload slot="append">
						<el-button>上传图片</el-button>
					</el-upload>
				</el-input>
			</el-form-item>
			<el-form-item label="描述:" label-width="50px">
				<el-input autocomplete="off" type="textarea" :rows="3" placeholder="输入网站说明, 不超出200个字"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showEdit = false">取 消</el-button>
			<el-button type="primary" @click="showEdit = false">确 定</el-button>
		</div>
	</el-dialog>
	<el-dialog title="登录" :visible.sync="showLogin">
		<el-form>
			<el-form-item label="账号:" label-width="50px">
				<el-input v-model="loginForm.username" autocomplete="off" placeholder="账号"></el-input>
			</el-form-item>
			<el-form-item label="密码:" label-width="50px">
				<el-input v-model="loginForm.password" autocomplete="off" placeholder="密码" type="password"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showLogin = false">取 消</el-button>
			<el-button type="primary" @click="login">确 定</el-button>
		</div>
	</el-dialog>
</div>
</body>
<script>
	var v = new Vue({
		el:"#app",
		data:{
			showEdit: false,
			showLogin: false,
			loginForm:{},
			myinfo: null,
			tags:[],
			favs:[]
		},
		created(){
			axios.post("user/myinfo").then(resp => {
				if(resp.data.code == 1){
					this.myinfo = resp.data.data;
				}
			})
		},
		methods:{
			login(){
				const params = new URLSearchParams();
				for (let name in this.loginForm) {
					if(this.loginForm[name]){
						params.append(name, this.loginForm[name]);
					}
				}
				axios.post("user/login", params).then(resp => {
					if(resp.data.code == 1){
						this.myinfo = resp.data.data;
						this.showLogin = false;
					} else {
						this.$alert(resp.data.msg);
					}
				})
			},
			logout(){
				axios.post("user/logout").then(resp => {
					if(resp.data.code == 1){
						this.myinfo = null;
						this.tags = [];
						this.favs = [];
					}
				})
			},
			selectMenu(index,indexPath){
				if(index.startsWith("tag_")){
					axios.get("tag/queryById", {
						params: {tid: index.split("_")[1]}
					})
							.then(resp => {
						this.favs = resp.data.favs;
					})
				}
			}
		},
		watch:{
			myinfo(newVal, oldVal){
				if(newVal){
					axios.post("tag/myTags").then(resp => {
						this.tags = resp.data;
					})
					axios.post("fav/myFavAll").then(resp => {
						this.favs = resp.data;
					})
				}
			}
		},
	})
</script>
<style>
	html,body{
		margin: 0px;
		padding: 0px;
	}
	#app>.el-container>.el-main{
		overflow-x: hidden;
		background-image: url("https://img2.baidu.com/it/u=2076726300,191426335&fm=253&fmt=auto?w=500&h=500");
		background-size: cover;
	}
	.el-main{
		padding: 0px 10px;
	}
	.el-card{
		margin-top: 10px;
	}
	html,body,#app,#app>.el-container{
		height: 100%;
	}
	*{
		transition: all .5s;
	}
	a{
		text-decoration: none;
	}
	.c900{
		width: 1000px;
		margin: auto;
	}
	.title{
		background-color: #0a699999;
		color: #fff;
	}
	.title *{
		color: #fff;
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		gap: 10px;
	}
	.flex>*{
		margin: 0px;
		padding: 0px;
	}
	.center{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	nav{
		display: flex;
		height: 100%;
	}
	nav .el-link{
		padding-inline: 20px;
		font-size: 1em;
	}
	nav .el-link:hover{
		background-color: #99f7;
	}
	img{
		width: 40px;
		height: 40px;
		object-fit: cover;
	}
	.hsc:hover{
		transform: scale(1.1);
		box-shadow: 3px 3px 3px 3px #8888;
	}
	.grid2{
		display: grid;
		grid-template-columns: auto auto;
	}
	.grid3{
		display: grid;
		grid-template-columns: auto auto auto;
	}
	.grid4{
		display: grid;
		grid-template-columns: auto auto auto auto;
	}
	.h100{
		height: 100%;
	}
	small{
		font-size: .7em;
		color: #989
	}
</style>

</html>